<!--
 * @Author: Rain
 * @Date: 2021-11-21 13:54:38
 * @LastEditTime: 2023/12/03 12:14:39
 * @Description: Do Something
-->
<template>
  <div class="app-container w-full h-full overflow-hidden">
    <div class="head-container h-full flex flex-col overflow-hidden">
      <div class="flex items-center flex-end w-full search pb-10">
        <!-- 搜索 -->
        <!-- <label class="el-form-item-label">测试名称</label> -->
        <el-input
          v-model="query.atmrName"
          clearable
          placeholder="测评单元"
          style="width: 185px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select
          v-model="query.status"
          filterable
          clearable
          placeholder="状态"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in dict.advert_status"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <rrOperation :crud="crud" />
        <crudOperation
          :permission="permission"
          upload-url="/api/examInfo/upload"
          @upload="crud.toQuery"
        />
      </div>
      <div class="w-full flex-1 overflow-hidden">
        <el-table
          ref="table"
          v-loading="crud.loading"
          :data="crud.data"
          size="small"
          style="width: 100%"
          header-align="center"
          height="100%"
          @selection-change="crud.selectionChangeHandler"
        >
          <el-table-column type="expand" align="center">
            <template slot-scope="{ row }">
              <el-form :model="row" label-width="80px">
                <el-form-item label="说明">
                  <div>{{ row.atmrDesc }}</div>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="atmrName" label="测评单元" align="center" />
          <el-table-column prop="atmrType" label="测评类型" align="center">
            <template slot-scope="{ row }">
              {{ dict.label.evaluation_type[row.atmrType] }}
            </template>
          </el-table-column>
          <el-table-column prop="ageType" label="测评对象" align="center">
            <template slot-scope="{ row }">
              {{ row.ageType * 1 === 1 ? "成人" : "儿童" }}
            </template>
          </el-table-column>
          <el-table-column prop="examDatabaseName" label="题库" align="center" />
          <el-table-column prop="price" label="测评费用(元/次)" align="center" />
          <el-table-column prop="reportPrice" label="报告费用(元)" align="center" />
          <el-table-column prop="examOrderAmount" label="总费用" align="center" />
          <el-table-column prop="status" label="是否启用" align="center">
            <template slot-scope="scope">
              {{ dict.label.advert_status[scope.row.status] }}
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="atmrDesc"
            label="测试说明"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column prop="remark" label="备注" /> -->
          <el-table-column
            v-if="checkPer(['admin', 'atmr:edit', 'atmr:del'])"
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <div class="flex items-center justify-center" style="white-space: nowrap">
                <udOperation :data="scope.row" :permission="permission" />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination />
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crud.status.cu > 0"
      :title="crud.status.title"
      width="700px"
    >
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="测评单元" prop="atmrName">
              <el-input v-model="form.atmrName" placeholder="测评单元" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="题库" prop="examDatabaseId">
              <el-select v-model="form.examDatabaseId" filterable placeholder="请选择">
                <el-option
                  v-for="item in questionList"
                  :key="item.databaseId"
                  :label="item.databaseName"
                  :value="item.databaseId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="测评对象" prop="ageType">
              <el-select v-model="form.ageType" placeholder="请选择" class="w-full">
                <el-option label="成人" value="1" />
                <el-option label="儿童" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="测评类型" prop="atmrType">
              <el-select
                v-model="form.atmrType"
                filterable
                clearable
                placeholder="测评类型"
              >
                <el-option
                  v-for="item in dict.evaluation_type"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="测评费用" prop="price">
              <el-input-number v-model="form.price" class="w-full" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="报告费用" prop="reportPrice">
              <el-input-number v-model="form.reportPrice" class="w-full" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="测试说明">
          <Editor ref="editor" :content="form.atmrDesc" />
        </el-form-item>
        <el-form-item label="备注">
          <Editor ref="remark" :content="form.remark" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="是否启用">
              <el-select
                v-model="form.status"
                filterable
                placeholder="请选择"
                class="w-full"
              >
                <el-option
                  v-for="item in dict.advert_status"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item
              label="图标"
              prop="iconUrl"
              :rules="[{ required: true, message: '图标必须上传' }]"
            >
              <uploadImage ref="uploadImage" :src="form.iconUrl" @upload="uploadAction" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="default" @click="crud.cancelCU">取消</el-button>
        <el-button
          :loading="crud.status.cu === 2"
          type="primary"
          @click="submitAction"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import crudAtmr from '@/api/atmr'
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import rrOperation from '@crud/RR.operation'
import udOperation from '@crud/UD.operation'
import { initData } from '@/api/data'
import uploadImage from '@/components/uploadImage'
import Editor from '@/components/Editor'
const defaultForm = {
  id: null,
  atmrName: null,
  atmrType: null,
  atmrDesc: null,
  remark: null,
  price: null,
  status: '0',
  examCount: null,
  reportPrice: null,
  examDatabaseId: -1,
  ageType: '1'
}
export default {
  name: 'Atmr',
  components: {
    pagination,
    crudOperation,
    rrOperation,
    udOperation,
    uploadImage,
    Editor
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['advert_status', 'evaluation_type'],
  cruds() {
    return CRUD({
      title: '测试管理',
      url: 'api/atmr',
      idField: 'id',
      sort: 'id,desc',
      crudMethod: { ...crudAtmr }
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'atmr:add'],
        edit: ['admin', 'atmr:edit'],
        del: ['admin', 'atmr:del']
      },
      rules: {
        atmrName: [{ required: true, message: '请填写测试名称', trigger: 'blur' }],
        examDatabaseId: [{ required: true, message: '请选择题库', trigger: 'change' }],
        price: [{ required: true, message: '请输入测评费用', trigger: 'blur' }],
        reportPrice: [{ required: true, message: '请输入报告费用', trigger: 'blur' }]
      },
      queryTypeOptions: [
        { key: 'atmrName', display_name: '测试名称' },
        { key: 'status', display_name: '是否启用' }
      ],
      file: null,
      questionList: []
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    submitAction() {
      this.$refs['form'].validate((validate) => {
        if (validate) {
          this.$refs['uploadImage'].handleUpload().then((res) => {
            this.form.atmrDesc = this.$refs['editor'].getContent()
            this.form.remark = this.$refs['remark'].getContent()
            this.crud.submitCU()
          })
        }
      })
    },
    [CRUD.HOOK.beforeToEdit]({ form }) {
      const { id } = form
      if (id) {
        initData('api/examDatabase', { size: 1000000, atmrExamTypeId: id }).then(
          (res) => {
            const { content } = res
            this.questionList = content
            this.questionList.unshift({ databaseId: -1, databaseName: '随机' })
          }
        )
      }
      return true
    },
    [CRUD.HOOK.beforeToAdd]() {
      this.questionList = [{ databaseId: -1, databaseName: '随机' }]
    },
    uploadAction(e) {
      this.form.iconUrl = e
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .el-dialog__body {
    padding: 10px;
  }
}
</style>
